<!-- 左边菜单 -->
<template>
  <div class='pd pt10'>
    <div class="title-label ">基础控件</div>
    <!-- <div class="nkjhcxzrft mt10">
    </div> -->
      <draggable class="nkjhcxzrft mt10"
      v-model="cdlits"
      :clone="cloneDog"
      :group="{ name: 'people', pull: 'clone', put: false }"
    >
      <template #item="{ element }">

      <div class="fsdfzxcdsrte sz" >
     <div class="kkxcxzrtt vertical-center">
          <i class=" iconfont z9 fz20" :class="element.icon"></i>
        </div> 
        <p class="fz12 z3 cen mt5">{{ element.title }}</p>
      </div>
      </template>
  </draggable>
  </div>

</template>
<script lang='ts' setup>
import { ref } from "vue";
import draggable from "vuedraggable";
const cdlits = [
  {
    title: "输入框",
    type: "input",
    val: "",
    icon: "dx-shurukuang"
  }, {
    title: "数字输入框",
    type: "number",
    val: "",
    icon: "dx-Field-number"
  }, {
    title: "多行文本",
    type: "textarea",
    val: "",
    icon: "dx-duohangwenben"
  }, {
    title: "富文本",
    type: "fwb",
    val: "",
    icon: "dx-m-fuwenben"
  }, {
    title: "图片",
    type: "img",
    val: "",
    icon: "dx-img"
  }, {
    title: "多张图片",
    type: "imglist",
    val: [],
    icon: "dx-ai-img-list"
  }, {
    title: "pdf",
    type: "pdf",
    val: "",
    icon: "dx-pdf"
  }, {
    title: "视频",
    type: "video",
    val: "",
    icon: "dx-video"
  }, {
    title: "下拉框",
    type: "select",
    icon: "dx-biaodanzujian-xialakuang",
    options: [],
    val: "1",
    callBack(data) {
     
    }
  }, {
    title: "日期",
    type: "date",
    icon: "dx-24gl-calendar",
    bz:"val: transferTimeYMD(new Date().getTime()) val要这样处理"
    
  }, {
    title: "日期时间",
    type: "datetime",
    icon: "dx-shijianriqi"
  }, {
    title: "单选框",
    type: "radio",
    icon: "dx-radiobox",
    val: "",
    opt:[
      {
        label:"选项1",
        value:1
      },{
        label:"选项2",
        value:2
      }
    ]
  }, {
    title: "标签",
    type: "Tags",
    icon: "dx-tag",
    val: [],

  }, {
    title: "地图选址",
    type: "mapdz",
    icon: "dx-ditu",
    keyjw: "",
  }


]

const cloneDog = (data, $event) => {
  const fj = JSON.parse(JSON.stringify(data));
  console.log(fj);
  return {
    ...fj,
    span:12,
    key:"",
    width:"",
    search:false,
    istable:true,
    required:false
  }
}
</script>
<style scoped>
.nkjhcxzrft {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.kkxcxzrtt {
  height: 60px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.fsdfzxcdsrte:hover * {
  color: #009ef6 !important
}
.fsdfzxcdsrte:hover .kkxcxzrtt{
  border-color: #009ef6 !important
}
</style>